<template>
  <div>
    <div class="header">
      <span class="search-header">搜索用户数</span>
      <svg t="1664333111507" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3195" width="20" height="20">
        <path d="M512 958.016C266.08 958.016 65.984 757.952 65.984 512 65.984 266.08 266.08 65.984 512 65.984c245.952 0 446.016 200.064 446.016 446.016C958.016 757.952 757.952 958.016 512 958.016zM512 129.984C301.344 129.984 129.984 301.344 129.984 512c0 210.624 171.36 382.016 382.016 382.016 210.624 0 382.016-171.36 382.016-382.016C894.016 301.344 722.624 129.984 512 129.984z" p-id="3196" fill="#bfbfbf"></path>
        <path d="M512 304m-48 0a1.5 1.5 0 1 0 96 0 1.5 1.5 0 1 0-96 0Z" p-id="3197" fill="#bfbfbf"></path>
        <path d="M512 768c-17.664 0-32-14.304-32-32l0-288c0-17.664 14.336-32 32-32s32 14.336 32 32l0 288C544 753.696 529.664 768 512 768z" p-id="3198" fill="#bfbfbf"></path>
      </svg>
    </div>
    <div class="main">
      <span class="min-title">11123 </span>
      <span class="min-content">17.1</span>
      <svg t="1664360658143" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2947" width="16" height="16">
        <path d="M420.864 448.512l-164.864 140.288 0-187.392 185.344-162.816 7.168 8.192 164.864 193.536 197.632-205.824-106.496-105.472 317.44-2.048 0 315.392-107.52-105.472-313.344 326.656-3.072-7.168zM928.768 703.488q19.456 0 37.376 7.68t30.72 20.48 20.48 30.72 7.68 37.376q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68l-832.512 0q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888l0-641.024q0-19.456 7.68-36.864t20.48-30.208 30.208-20.48 37.888-7.68q19.456 0 37.376 7.68t30.72 20.48 20.48 30.208 7.68 36.864l0 481.28 4.096 0-4.096 3.072 0 60.416 736.256 0z" p-id="2948" fill="#1afa29"></path>
      </svg>
      <svg t="1664360866681" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2644" width="16" height="16">
        <path d="M256 366.592l0-187.392 164.864 139.264 179.2-209.92 1.024-3.072 1.024 1.024 1.024-1.024 9.216 11.264 308.224 308.224 101.376-100.352 0 316.416-317.44-3.072 111.616-109.568-201.728-202.752-165.888 194.56-7.168 9.216 0-1.024zM928.768 704.512q19.456 0 37.376 7.68t30.72 20.48 20.48 30.72 7.68 37.376q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68l-832.512 0q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888l0-641.024q0-19.456 7.68-36.864t20.48-30.208 30.208-20.48 37.888-7.68q19.456 0 36.864 7.168t30.208 19.968 20.992 29.696 8.192 36.352l0 546.816 736.256 0z" p-id="2645" fill="#d81e06"></path>
      </svg>
    </div>
    <div class="footer">
      <div class="charts" ref="charts"></div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  mounted() {
    // 初始化echarts实例 注意 echarts5版本以上需要通过require来引入
    let lineCharts = echarts.init(this.$refs.charts)
    // 配置数据
    lineCharts.setOption({
      xAxis: {
        show: false,
        // 设置成折线
        type: 'category'
      },
      yAxis: {
        show: false
      },
      series: [
        {
          type: 'line',
          data: [10, 7, 33, 12, 88, 9, 10, 7, 33],
          // 拐点样式设置
          itemStyle: {
            opacity: 0
          },
          // 线的样式
          lineStyle: {
            color: 'skyblue'
          },
          // 线的区域填充样式 设置渐变
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                // 百分之0 处的颜色与偏移量
                {
                  offset: 0,
                  color: 'skyblue'
                },
                // 百分之100 处的颜色与偏移量

                {
                  offset: 1,
                  color: '#fff'
                }
              ]
            }
          }
        }
      ],
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.main {
  margin: 10px 0;
  .min-title {
    margin-right: 30px;
  }
  .min-content {
    margin-right: 10px;
  }
}
.charts {
  width: 100%;
  height: 50px;
}
</style>